/*
  学习目标：使用useState+函数式组件，使用状态
*/
import React, { useState } from 'react';
import './index.css';
// 1. 导入useState函数，作用：声明状态和修改状态的函数

export default function App() {
  // 2， 声明状态
  // 语法🔔： const [状态变量，修改状态的函数] = useState(初始值)
  const [count, setCount] = useState(1);
  // const 等价于 state.count
  // setCount 等于加setState({count: value})

  // 🔔 声明多个状态，连续调用useState即可
  const [msg, setMsg] = useState('Hello React');

  return (
    <div>
      {/* 3. 把count当做变量来使用即可 */}
      count: {count}
      <h1>{msg}</h1>
      <button onClick={() => setMsg(msg + '~')}>点击改变Msg</button>
      <button onClick={() => setCount(count + 1)}>点击改变count</button>
    </div>
  );
}
